<div class="role-edit-container" [@fadeIn]>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">编辑用户-角色关联关系</h3>
        </div>
        <div class="panel-body">
            <h3>用户资料</h3>
            <div class="bg-info user-info-form-container">
                <form class="form-horizontal" role="form" [formGroup]="formGroup">
                    <div class="form-group" [ngClass]="{ 'has-error': formGroup.get('userName').invalid }">
                        <label class="col-md-2 control-label">用户名：</label>
                        <div class="col-md-10">
                            <input class="form-control" required="required" type="input" formControlName="userName" />
                        </div>
                    </div>
                    <div class="form-group" [ngClass]="{ 'has-error': formGroup.get('nickName').invalid }">
                        <label class="col-md-2 control-label">昵称：</label>
                        <div class="col-md-10">
                            <input class="form-control" type="input" formControlName="nickName" />
                        </div>
                    </div>
                    <div class="form-group" [ngClass]="{ 'has-error': formGroup.get('gender').invalid }">
                        <label class="col-md-2 control-label">性别：</label>
                        <div class="col-md-10">
                            <ng-container *ngFor="let g of genderList; let i = index">
                                <label class="radio-inline">
                                    <input type="radio" name="gender" [value]="g.value" formControlName="gender">
                                    {{g.label}}
                                </label>
                            </ng-container>
                        </div>
                    </div>
                    <div class="form-group" [ngClass]="{ 'has-error': formGroup.get('email').invalid }">
                        <label class="col-md-2 control-label">常用邮箱：</label>
                        <div class="col-md-10">
                            <input class="form-control" type="input" formControlName="email" />
                        </div>
                    </div>
                    <div class="form-group" [ngClass]="{ 'has-error': formGroup.get('cellphone').invalid }">
                        <label class="col-md-2 control-label">手机号：</label>
                        <div class="col-md-10">
                            <input class="form-control" type="input" formControlName="cellphone" />
                        </div>
                    </div>
                    <div class="form-group" [ngClass]="{ 'has-error': formGroup.get('status').invalid }">
                        <label class="col-md-2 control-label">启用：</label>
                        <div class="col-md-10">
                            <div class="checkbox">
                                <label>
                                    <input name="status" type="checkbox" formControlName="status" checked />
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group" [ngClass]="{ 'has-error': formGroup.get('remark').invalid }">
                        <label class="col-md-2 control-label">简介：</label>
                        <div class="col-md-10">
                            <textarea rows="5" class="form-control" formControlName="remark"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <h3>用户关联的角色</h3>
            <p-table [value]="roleList" [(selection)]="selectedRoles" (selectionChange)="onSelectionChange($event)"
                dataKey="roleId" editMode="row" [paginator]="true" [rows]="10" [pageLinks]="10"
                [totalRecords]="totalRecords" styleClass="p-datatable-gridlines" [lazy]="true"
                (onLazyLoad)="pageChanged($event)">
                <ng-template pTemplate="header">
                    <tr>
                        <th style="width: 4rem">
                            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                        </th>
                        <th>角色名称</th>
                        <th>状态</th>
                        <th>备注</th>
                        <th>前端页面权限</th>
                        <th>后端接口权限</th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-rowData let-editing="editing" let-ri="rowIndex">
                    <tr [pEditableRow]="rowData">
                        <td>
                            <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
                        </td>
                        <td>
                            {{rowData.roleName}}
                        </td>
                        <td>
                            <span *ngIf="rowData.status==1" class='label label-success'>已启用</span>
                            <span *ngIf="rowData.status==0" class='label label-danger'>已禁用</span>
                        </td>
                        <td>
                            {{rowData.remark}}
                        </td>
                        <td>
                            <h5 *ngFor="let componentPermission of rowData.componentEntities">
                                <span class="label label-warning">{{componentPermission.componentName}}</span>
                            </h5>
                        </td>
                        <td>
                            <h5 *ngFor="let apiPermission of rowData.apiEntities">
                                <span class="label label-warning">{{apiPermission.apiName}}</span>
                            </h5>
                        </td>
                    </tr>
                </ng-template>
            </p-table>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <button type="button" class="btn btn-success btn-margin-1rem" (click)="save()">
                保存
            </button>
            <button type="button" class="btn btn-danger" (click)="cancel()">
                取消
            </button>
        </div>
    </div>
</div>